<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../semantic/dist/semantic.min.css">
    <title>semantic-ui-form</title>
    <style>

    </style>
</head>

<body>
    <div class="ui container">
        <h1 class="ui dividing header">Form</h1>
        <!-- 一个最基本的form -->
        <form action="" class="ui error form">
            <!-- 如果想让这一行为行内元素可以加一个 inline 的类 -->
            <!-- 我们可以先把报错写好，它们默认不会显示，当我们给form添加了对应的报错的时候，它们就会显示出来 -->
            <!-- 正在提交的表单我们可以在上面添加一个loading -->
            <div class="ui error message">
                <div class="header">手机验证</div>
                <p>我们暂时不支付配送到您指定的地址</p>
            </div>
            <div class="ui success message">
                <div class="header">订阅成功</div>
                <p>恭喜你订阅成功了</p>
            </div>
            <div class="field required">
                <label for="">姓名</label>
                <input type="text" placeholder="请输入您的姓名">
            </div>
            <div class="two fields">
                <div class="field">
                    <label for="">密码</label>
                    <input type="text" placeholder="请输入密码">
                </div>
                <div class="disabled field">
                    <label for="">邮箱</label>
                    <input type="text" placeholder="请输入邮箱" value="113132@qq.com" disabled>
                </div>
            </div>
            <div class="fields">
                <div class="error field six wide">
                    <label for="">爱好</label>
                    <input type="text" placeholder="请输入爱好">
                </div>
                <div class="field ten wide">
                    <label for="">讨厌</label>
                    <input type="text" placeholder="请输入讨厌">
                </div>
            </div>
            <div class="field">
                <label for="">选择国家</label>
                <select multiple name="country" id="" class="ui dropdown">
                    <option value="">选择国家</option>
                    <option value="CN">中国</option>
                    <option value="US">美国</option>
                </select>
            </div>

            <div class="inline fields">
                <label for="">选择支付方式:</label>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="pay" id="">
                        <label for="">支付宝</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="pay" id="">
                        <label for="">Paypal</label>
                    </div>
                </div>
            </div>

            <div class="field">
                <div class="ui checkbox">
                    <input type="checkbox" name="" id="">
                    <label for="">短信通知</label>
                </div>
                <div class="ui toggle checkbox">
                    <input type="checkbox" name="" id="">
                    <label for="">短信通知</label>
                </div>
                <div class="ui slider checkbox">
                    <input type="checkbox" name="" id="">
                    <label for="">短信通知</label>
                </div>
            </div>

            <button type="submit" class="ui button">提交</button>
        </form>

    </div>




    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../semantic/dist/semantic.min.js"></script>
    <script>
        $('select.dropdown').dropdown();
        $('.ui.radio.checkbox').checkbox();
        $('.ui.checkbox').checkbox();
    </script>
</body>

</html>
